<template>
    <div class="main">
        <div class="top-radio">
            <el-radio-group v-model="userData.type" @change="typeChange">
                <el-radio selected label="posi">选择岗位</el-radio>
                <el-radio label="user">按人员</el-radio>
            </el-radio-group>
        </div>
        <div class="selector">
            <div class="chose-user">
                <div class="lefttree">
                    <el-tree
                        :data="userData.type=='posi'?positionData:usersData"
                        node-key="id"
                        ref="tree"
                        show-checkbox
                        default-expand-all
                        highlight-current
                        :check-on-click-node="true"
                        @check="selectChange"
                        @node-click="nodeClick"
                        :check-strictly="true"
                        :default-checked-keys="selected"
                        :expand-on-click-node="false">
                        <span class="custom-tree-node" slot-scope="{ node }">
                        <span>
                             </span>
                             <span class="no-wrap">{{ node.label }}</span>
                         </span>
                    </el-tree>
                </div>
                <div class="center-wrapper">
                  <div class="iconfont">&#xe603;</div>
                  <div class="iconfont">&#xe603;</div>
                </div>
                <div class="rightcontent">
                    <div style="padding-left: 30px;padding-top: 15px;">
                        <div v-for="(user, index) in selected" :key="index" class="user-item">
                            <div class="username">
                                {{user.label}}
                            </div>
                            <div class="bt-delete">
                                <el-button type="text" icon="el-icon-circle-close"
                                           @click="deletePosition(user)"></el-button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <div style="text-align: center">
            <el-button style="width: 120px;height: 40px;line-height: 0" plain type="primary" class="bt-long" @click="$emit('cancel')">取消</el-button>
            <el-button style="width: 120px;height: 40px;line-height: 0" type="primary" class="bt-long" @click="saveRoleUsers">保存</el-button>
        </div>
    </div>
</template>

<script>
export default {
  name: 'AddNode',
  props: {
    userData2: {

    },
    t: {
      type: String,
      default () {
        return 'node'
      }
    }
  },

  data () {
    return {
      userData: JSON.parse(JSON.stringify(this.userData2)),
      treeData: [],
      selectedUsers: [],
      selectPositions: [],
      selectDeparts: [],
      currRole: {},
      positionData: [],
      departData: [],
      usersData: [],
      leftlist: [],
      settinglist: [],
      currUserList: [],
      select_left_menus: [],
      select_menus: [],
      selected: []
    }
  },
  watch: {
    userData (val) {
      this.getInfo()
    }
  },
  created () {
    this.getInfo()
  },
  methods: {
    getInfo () {
      var othis = this
      this.$axios({
        url: `${this.medEventApi}/api/getpud`,
        method: 'get'
      }).then(res => {
        if (res.data.r === 0) {
          othis.positionData = res.data.positions
          othis.departData = res.data.departs
          othis.usersData = res.data.users

          if (othis.treeData.length === 0) {
            othis.updateSelected(othis.userData)
          }
        //
        // setTimeout(function () {
        //
        //      othis.updateSelected(othis.userData.type)
        //
        // }, 500)
        }
      })
    },
    deleteUser (user) {
      this.selectedUsers.splice(this.selectedUsers.indexOf(user), 1)
      this.$refs.tree1.setCheckedNodes(this.selectedUsers)
    },
    selectChange (data, selected) {
      //
      if (this.userData.type === 'posi') {
        this.selected = [data]
      } else if (this.userData.type === 'user') {
        this.selected = []
        if (data.type === '1') {
          this.selected.push(data)
        }
      }
      this.$refs.tree.setCheckedNodes(this.selected)
    },
    saveRoleUsers () {
      var othis = this
      var url = `${this.medEventApi}/api/savenode?tid=` + this.$route.query.id + '&type=' + this.userData.type
      if (this.userData.id) {
        url += '&id=' + this.userData.id
      }
      this.$axios({
        url: url,
        method: 'post',
        data: JSON.stringify(this.selected)
      }).then(res => {
        this.selected = []
        othis.$emit('refresh', res.data)
      }).catch(e => {
        this.handleError(e)
      })

      // this.$emit("cancel")
    },
    typeChange (val) {
      this.updateSelected(this.userData)
    },
    deletePosition (user) {
      this.selected.splice(this.selected.indexOf(user), 1)
      this.$refs.tree.setCheckedNodes(this.selected)
    },
    nodeClick (a, b, c) {
      if (this.userData.type === 'posi') {
        this.selected = [a]
      } else if (this.userData.type === 'user') {
        if (a.type === '0') {
          return
        }
        this.selected = []
        var othis = this

        othis.selected.push(a)
      }
      this.$refs.tree.setCheckedNodes(this.selected)
    },
    updateSelected (datas) {
      var othis = this
      othis.userData = datas
      var stype = othis.userData.type
      othis.selected = []
      if (stype === 'posi') {
        if (this.userData.posi) {
          this.userData.posi.forEach(function (item) {
            othis.selected.push({id: item.id, label: item.position_name})
          })
        }
        setTimeout(function () {
          othis.$refs.tree.setCheckedNodes(othis.selected)
        }, 500)
      } else if (stype === 'user') {
        if (this.userData.user) {
          this.userData.user.forEach(function (item) {
            othis.selected.push({id: item.id, label: item.name})
          })
        }
        setTimeout(function () {
          othis.$refs.tree.setCheckedNodes(othis.selected)
        }, 500)
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
    .bt-delete >>> .el-button
      position relative
      height 30px
      line-height 0
    .bt-delete >>> .el-icon-circle-close:before
      position absolute
      top 8px
    .username {
        line-height: 30px;
        color: #409EFF;
        cursor: pointer;
    }

    .el-checkbox:nth-child(1) {
        margin-left: 10px;
    }

    .icon {
        width: 10px;
    }
    .selector
    {
        margin-bottom 45px
        max-height 328px
    }
    .chose-user {
        display: flex;
        justify-content space-around
    }

    .lefttree {
        padded_box(border-box, 15px 0)
        scroll()
        max-width 280px;
        height 328px
        border:1px solid rgba(204,204,204,1)
        border-radius 4px
        flex: 0 0 50%;
    }
    .el-button--text {
        color: #ccc;
    }

    .bt-delete {
        opacity: 0;
        float: right;
    }

    .user-item {
        display: flex;
        height 30px
        line-height 30px
    }
    .user-item:hover {
      .bt-delete {
        opacity: 1;
      }
    }
    .username {
        flex: 1;
    }

    .rightcontent {
        padded_box(border-box, 15px 0)
        scroll()
        max-width 280px
        height 328px
        flex: 0 0 50%;
        border:1px solid rgba(204,204,204,1)
        border-radius 4px
    }

    .bt-delete {
        flex: 0 0 20px;
    }
    .lefttree::-webkit-scrollbar, .rightcontent::-webkit-scrollbar {
        width 6px    /*高宽分别对应横竖滚动条的尺寸*/
        height 1px
    }
    .lefttree::-webkit-scrollbar-thumb, .rightcontent::-webkit-scrollbar-thumb /*滚动条里面小方块*/
      border-radius 3px
      -webkit-box-shadow inset 0 0 5px rgba(0,0,0,0.2);
      background rgba(0, 0, 0, 0.25)
    .center-wrapper
      columnCenter()
      color #888888
      .iconfont + .iconfont
        transform rotate(-180deg)
        margin-top 20px
    .no-wrap
      display block
      max-width 209px
      no-wrap()
</style>
